<!--
 - Author : wang885298.
 - Date   : 2018/7/13.
 - File   : 通用侧边栏.
 -->

<template>
  <div>
    <el-menu
        :default-active="my_index"
        class="el-menu-vertical-demo"
        background-color="#212d3f"
        text-color="#fefefe"
        active-text-color="#fff">
      <el-menu-item v-for="(item,index) in sidebars" :key="item.index" :index="item.index" @click="turnToLink(item.index)">{{item.title}}</el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        sidebars: [
          {
            title: '指挥平台后台-2D打点',
            index: '2d'
          },
          {
            title: '指挥平台后台-3D打点',
            index: '3d'
          },
          {
            title: '锚点批量维护',
            index: 'batchManage'
          },
          {
            title: '锚点维护日志',
            index: 'batchLogoManage'
          }
        ]
      }
    },
    model: {
      prop: 'my_index',
      event: 'my_index'
    },
    methods: {
      turnToLink (type) {
        this.$emit('my_index', type)
      }
    },
    props: {
      my_index: {
        type: String,
        default: '2d'
      }
    }
  }
</script>
<style lang="less">
  .el-aside {
    background-color: #212d3f;
    color: #333;
    text-align: center;
    line-height: 200px;
    border-right: 1px solid #fff;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
